<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=4, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body{
            margin: 0;
            padding: 0;
        }
        .header{
             
            height: 40px;
            background-color: blue
        }
        .header2{
            height: 100px;
            background-color:cornflowerblue
        }
        .header3{
            height: 300px;
            background-color:darkgrey
        }
        .header4
        {
            height: 300px;
             
        }
        .header5
        {
            margin: 0;
            padding: 10px;
            height: 300px;
             
            width: 645px;
            
            float: left;
        }
        .header6
        {
            margin: 0;
            padding: 10px;
            height: 300px;
            width: 645px;
            float:right;
             
        }
        .header7
        {
            margin: 0;
            padding: 0px;
            height: 300px;
            width: 300px;
            background-color: blue;
            width: 300px;
            float: left;
        }
        .header8
        {
            margin: 0;
            padding: 0;
            height: 300px;
            width: 300px;
            background-color:coral;
            float: right;
        }
        .header9
        {
            margin: 0;
            padding: 0px;
            height: 300px;
            width: 300px;
            background-color: blue;
            width: 300px;
            float: left;
        }
        .header10
        {
            margin: 0;
            padding: 0;
            height: 300px;
            width: 300px;
            background-color:coral;
            float: right;
        }
        .b1>.h1
        {
            position: relative;
            margin: 10px;
            height: 300px;
            width: 400px;
            background-color:coral;
            float: right;
        }
        .b1>.h2
        {
            position: relative;
            margin: 10px;
            height: 300px;
            width: 400px;
            background-color:coral;
            float: left;
        }
        .b1>.h3
        {
            position: relative;
            margin: 10px;
            height: 300px;
            width: 488px;
            background-color:darkmagenta;
            float: left;
        }
         
        .h4{
             margin: 10px;
             height: 40px;
             background-color: blue
         }
         .h5{
             
             height: 100px;
             background-color:cornflowerblue
         }
    </style>
</head>
<body>
    <div class="header"></div>
    <div class="header2"></div>
    <div class="header3"></div>
    <div class="header4">
    <div class="header5">
        <div class="header7">

        </div>
        <div class="header8">

            </div>
    </div>
    <div class="header6">
        <div class="header9">

        </div>
        <div class="header10">

            </div>
    </div>
     
    </div>
    <div class="b1"> 
    <div class="h1"></div>
    <div class="h2"></div>
    <div class="h3"></div>
</div>
    <div class="h4"></div>
    <div class="h5"></div>
 
</div>
 
</body>
</html>